<script setup lang="ts">
import { doGetWorkingPeriodList } from '@/api/base/workCalendar/workingHours/index';
import { doUpdateWorkingPeriodList } from '@/api/base/workCalendar/workCalender/index';
import { handleHoursRender } from '@/views/Base/WorkCalendar/common';
import { message } from '@/components/q-message/message';
import { generateNameToLevel } from '@/config/constant';
import type { AdditionalProp } from '@/api/base/workCalendar/workCalender/model/type';
import type { Hours } from '@/api/base/workCalendar/workingHours/model/type';

const { visible, loading, handleCancel } = useModal();

/**
 * @: 打开弹框
 * @param {*} ref
 * @return {*}
 */
const updateData = ref<Hours[]>([]);
let colData: AdditionalProp;
const open = async (col: AdditionalProp) => {
    currentRow.value = undefined;
    try {
        visible.value = true;
        if (!updateData.value.length) {
            await getData();
        }
        colData = col;
    } catch (error) {
        console.log('err', error);
    }
};

/**
 * @: 获取工作时段
 * @param {*} try
 * @param {*} size
 * @return {*}
 */
const getData = async () => {
    try {
        const { data } = await doGetWorkingPeriodList({ current: 1, size: 10000 });
        if (data) {
            const hours = data.records.map(item => {
                return {
                    name: item.name,
                    hours: handleHoursRender(item),
                    id: item.id
                };
            });
            updateData.value = [{ name: '休息', hours: '--', id: 0 }, ...hours];
        }
    } catch (error) {
        console.log('err', error);
    }
};

/**
 * @: 编辑工作日历
 * @param {*} row
 * @return {*}
 */
const currentRow = ref<Hours | undefined>();
const handleRowClick = async (row: Hours) => {
    currentRow.value = row;
};

const emit = defineEmits(['close']);
const handleSubmit = async () => {
    if (!currentRow.value) {
        message.warning('请先选择工作时段！');
        return;
    }
    const body = { periodId: currentRow.value.id, id: colData.id };
    try {
        const res = await doUpdateWorkingPeriodList(body);
        if (res) {
            message.success('工作日历编辑成功！');
            visible.value = false;
            emit('close');
            return res;
        }
    } catch (error) {
        console.log('error', error);
    }
};

defineExpose({
    open
});
</script>
<template>
    <q-modal
        v-model:visible="visible"
        title="编辑工作时段"
        width="438px"
        centered
        wrap-class-name="workCalendar-modal"
        :confirm-loading="loading"
        @cancel="handleCancel(true)"
        @ok="handleSubmit"
    >
        <el-table
            :id="generateNameToLevel('2')"
            :data="updateData"
            highlight-current-row
            show-overflow-tooltip
            scrollbar-always-on
            height="210px"
            :header-cell-style="{ height: '32px' }"
            :row-style="{ height: '44px' }"
            @row-click="handleRowClick"
        >
            <el-table-column label="工作时段名称" width="130" prop="name" />
            <el-table-column label="工作时段" width="260" prop="hours" />
        </el-table>
    </q-modal>
</template>
